<template>
	<view class="">
		<view class="header">
			<j-date  @changeDay="changeDay"></j-date>
		</view>
		
		<view class="itemList">
			<view class="item">
				<text class="msg">消息类型</text>
				<view class="u-f-ac" @click="showTypeModel">
					<text class="all">{{type}}</text>
					<uni-icons type="right" color="#3E3E3E" size="20" />
				</view>
			</view>
			<view v-if="list.length==0" class="noData">
			    <view>
					<uni-icons custom-prefix="iconfont" type="icon-kong" size="64"></uni-icons>
			        <view>暂无消息</view>
			    </view>
			</view>
			<view class="u-f-ac item" v-for="(item,index) in list" :key="index">
				<view class="u-f-c">
					<text class="time">{{item.AlarmTime}}</text>
					<text class="type">{{item.alarmType}}</text>
				</view>
				<image class="pic" src="https://statics.xmcsrv.net/weixin/logo.png" mode=""></image>
			</view>
		</view>
		<uni-popup ref="popup" :isMaskClick="false" type="bottom">
			<view>
				<j-cell-group>
					<view class="popup-content">
						<view style="background:#FFFFFF;padding:20rpx;text-align: center;">
							<view class="title">消息类型</view>
							<view class="uni-flex uni-row item">
								<view class="label" :class="{'actived':item.select}" v-for="(item,index) in typeList" :key="index" @click="selectType(index)">{{item.name}}</view>
							</view>
						</view>
					</view>
				</j-cell-group>
				<view  style="padding:0 20rpx 20rpx">
					<button type="default" plain style="width: 100%;color: #FF0025 !important;border-color: #dcdcdc !important;background-color: #FFFFFF !important;" @click="confirmClick">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const { date2DateTimeStr } = require('@/utils/util.js');
	export default {
		data(){
			return{
				// date2DateTimeStr:date2DateTimeStr,
				// 设备对象
				device: {
					deviceName: ''
				},
				tempList:[],
				sourceList:[],
				list:[],
				typeList:[
					{
						name:'全部类型',
						select:true,
						type:'All'
					},
					{
						name:'开门消息',
						select:false,
						type:'Unlock'
					},
					{
						name:'报警消息',
						select:false,
						type:'DoorLockAlarm'
					},
					{
						name:'门铃呼叫',
						select:false,
						type:'DoorLockCall'
					},
					{
						name:'活动检测',
						select:false,
						type:'VideoMotion'
					},
					{
						name:'电量报警',
						select:false,
						type:'ElectricityAlarm'
					},
				],
				index:0,
				type:'全部类型',
				date:'',
				startTime:'',
				endTime:'',
			}
		},
		onLoad(opt) {
			let currentDate = new Date()
			console.log(date2DateTimeStr(currentDate),currentDate.getTime());
			this.startTime = date2DateTimeStr(currentDate).split(' ')[0]+' 00:00:00'
			this.endTime = date2DateTimeStr(currentDate)
			this.device = JSON.parse(opt.device)
			this.getAlarmList()
		},
		methods:{
			//获取消息列表
			getAlarmList(){
				uni.showLoading({
					title:'正在获取'
				})
				let token = this.device.token
				let data = {
					sn: this.device.deviceNo,
					startTime:this.startTime,
					endTime: this.endTime
				}
				getApp().globalData.api.getLockAlarmMSgList(data,token, (result) => {
					uni.hideLoading()
					this.list = result.AlarmArray
					this.sourceList = result.AlarmArray
					this.list.forEach((item)=>{
						if(item.AlarmEvent.indexOf('VideoMotion')!=-1){
							console.log('dddddd');
							item.alarmType = '活动侦测'
						}else if(item.AlarmEvent.indexOf('DoorLockAlarm')!=-1){
							item.alarmType = '报警消息'
						}else if(item.AlarmEvent.indexOf('DoorLockCall')!=-1){
							item.alarmType = '门铃呼叫'
						}else if(item.AlarmEvent.indexOf('ElectricityAlarm')!=-1){
							item.alarmType = '电量报警'
						}else if(item.AlarmEvent.indexOf('Unlock')!=-1){
							item.alarmType = '开门消息'
						}
					})
					console.log(this.list);
					if(this.list.length>0){
						this.getImgUrl({alarmId:this.list[0].AlarmId},token)
					}
					
				});
			},
			//获取报警图片
			getImgUrl(data,token){
				getApp().globalData.api.getPicUrl(data,token,(result)=>{
					
				});
			},
		
			// 选择日期
			changeDay(e){
				console.log(e);
				this.date = e.date
				this.startTime = this.date + ' 00:00:00'
				this.endTime = this.date + ' 23:59:59'
				this.getAlarmList()
			},
			//确定门锁类型
			confirmClick(){
				this.list = this.tempList
				this.type = this.typeList[this.index].name
				this.$refs.popup.close()
			},
			//选择门锁类型
			selectType(index){
				this.index = index
				let type = this.typeList[index].type
				this.typeList.forEach((item,i)=>{
					item.select = i==index?true:false
				})
				this.tempList = []
				if(type=='All'){
					this.tempList = this.sourceList
				}else{
					this.sourceList.forEach((item)=>{
						if(item.AlarmEvent.indexOf(type)!=-1){
							this.tempList.push(item)
						}
					})
				}
			},
			//显示类型弹框
			showTypeModel(){
				this.$refs.popup.open('bottom')
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F7FB;
	}
	.noData{
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
	}
	.itemList{
		margin: 20rpx;
		background: white;
		padding: 40rpx;
		.item{
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1px solid #E8E8E8;
			.msg{
				color: #000000;
				font-weight: bold;
				font-size: 30rpx;
			}
			.all{
				color: #989898;
				font-size: 26rpx;
			}
			.pic{
				width: 202rpx;
				height: 114rpx;
			}
			.time{
				color: #5A5A5A;
				font-size: 26rpx;
			}
			.type{
				color: #FF0025;
				font-size: 26rpx;
				
			}
		}
	}
	.popup-content{
		.title{
			font-size: 30rpx;
			line-height: 84rpx;
			color: #000000;
			font-weight: bold;
			text-align: center;
			margin: 30rpx 0;
		}
		.item{
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			// margin: 30rpx 0;
		}
		.label{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 158rpx;
			height: 56rpx;
			font-size: 28rpx;
			border-radius: 15rpx;
			margin: 15rpx ;
			padding: 0 20rpx;
			color: #000000 !important;
			background:#F6F6F6 !important;
			
		}
		.actived{
			background: white !important;
			border: 2rpx solid #2CBDB8;
			color: #2CBDB8 !important;
		}
		.confirm{
			font-size: 30rpx;
			color: #2CBDB8;
			height: 98rpx;
		}
		.btn{
			width: 100%;
			color: #FF0025 !important; 
			border-color: #dcdcdc !important;
			background-color: #FFFFFF !important;
		}
	}
</style>